<template>
  <div
    :style="{
      height: '200px',
      overflow: 'hidden',
      position: 'relative',
      border: '1px solid #ebedf0',
      borderRadius: '2px',
      padding: '48px',
      textAlign: 'center',
      background: '#fafafa',
    }"
  >
    Render in this
    <div style="margin-top: 16px">
      <CloudButton type="primary" @click="showDrawer"> Open </CloudButton>
    </div>
    <CloudDrawer
      title="Basic Drawer"
      placement="right"
      :closable="false"
      :visible="visible"
      :get-container="false"
      :wrap-style="{ position: 'absolute' }"
      @close="onClose"
    >
      <p>Some contents...</p>
    </CloudDrawer>
  </div>
</template>

<script>
  export default {
    title: '6.渲染在当前 DOM',
    subTitle: '渲染在当前 dom 里。自定义容器，查看 getContainer。',
    data () {
      return {
        visible: false,
      }
    },
    methods: {
      afterVisibleChange (val) {
        console.log('visible', val);
      },
      showDrawer () {
        this.visible = true;
      },
      onClose () {
        this.visible = false;
      },
    }
  }
</script>

<style lang="scss">
</style>